<template>
  <view class="df container">
    <!-- 左侧滚动视图区域 -->
    <scroll-view class="left" scroll-y="true" :style="{ height: wh + 'px' }">
      <view
        class="item"
        :class="{ active: categoryValue === item.id }"
        v-for="item in categoryList"
        :key="item.id"
        @click="handleCategory(item.id)"
        >{{ item.name }}</view
      >
    </scroll-view>
    <!-- 右侧的滚动视图区域 -->
    <scroll-view
      class="right padding-lr-default"
      scroll-y="true"
      :style="{ height: wh + 'px' }"
    >
      <goods-list-line-item :goodsList="goodsList" />
    </scroll-view>
  </view>
</template>
<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import { goodsListApi } from "@/api/index.js";

onLoad(() => {
  getGoodsList();
});

//获取当前系统的信息
const sysInfo = uni.getSystemInfoSync();
console.log(sysInfo);
//为wh窗口可用高度动态赋值
const wh = ref(sysInfo.windowHeight);

const categoryValue = ref(2);
const categoryList = ref([
  { name: "淘宝", id: 2 },
  { name: "拼多多", id: 3 },
  { name: "京东", id: 4 },
  { name: "小红书", id: 5 },
  { name: "抖音", id: 6 },
  { name: "快手", id: 7 },
  { name: "微信视频号", id: 8 },
]);
function handleCategory(id) {
  categoryValue.value = id;
  paging.value.reload();
}

// 商品列表
const goodsList = ref([]);
const paging = ref(null);

const getGoodsList = () => {
  const params = {
    currentPage: 1,
    pageSize: 10,
    source: categoryValue.value,
  };
  goodsListApi(params).then((res) => {
    goodsList.value = res.records;
  });
};

// const queryList = (pageNo, pageSize) => {
//   const params = {
//     currentPage: pageNo,
//     pageSize: pageSize,
//     source: categoryValue.value,
//   };
//   goodsListApi(params)
//     .then((res) => {
//       paging.value.complete(res.records);
//     })
//     .catch((res) => {
//       paging.value.complete(false);
//     });
// };
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  .left {
    background-color: #f0f0f0;
    flex-shrink: 0;
    width: 200rpx;
    height: 100%;
    .item {
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      position: relative;
      &.active {
        color: $theme;
        background-color: #fff;
        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
          height: 40rpx;
          width: 8rpx;
          background-color: #fa436a;
          border-radius: 0 8rpx 8rpx 0;
          opacity: 0.8;
        }
      }
    }
  }
  .right {
    flex: 1;
    overflow: hidden;
  }
}
</style>
